<template>
  <div class="list-block">
    <div class="con">
      <div class="list" v-for="(item, index) in classicM" :key="index">
        <div class="list-imgBlock">
          <img class="list-img" :src="item.img" width="64" height="90" alt="" />
        </div>
        <div class="list-msg">
          <div class="list-msg-left">
            <p>{{ item.nm }}</p>
            <p v-if="item.enm != ''">{{ item.enm }}</p>
            <p>{{ item.cat }}</p>
            <p>{{ item.pubDesc }}</p>
          </div>
          <div class="list-msg-right">
            <p>
              <span class="score">{{ item.sc }}</span>
              <span class="fen">分</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Classic",
  data() {
    return {
      classicM: [],
    };
  },
  created() {
    this.$axios
      .get(
        "/ajax/moreClassicList?sortId=1&showType=3&limit=10&offset=10&optimus_uuid=399952B0533E11ECAE29CD86D772C36E5732B227CFF74BDC9F85E023FBD5BE38&optimus_risk_level=71&optimus_code=10"
      )
      .then((data) => {
        console.log(data.data.classicMovies.list);
        data.data.classicMovies.list.forEach((item) => {
          item.img = item.img.replace("w.h", "128.180"); //64*90
        });
        this.classicM = data.data.classicMovies.list;
      });
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.list-block {
  width: 100%;
  background-color: #f5f5f5;
}
.list-block .con {
  width: 100%;
  background-color: #fff;
}
.list-block .con .list {
  width: 100%;
  height: 2.95rem;
  background-color: #fff;
  padding: 15px 15px 0 15px;
  display: flex;
}
.list-block .con .list .list-imgBlock {
  width: 1.8rem;
  min-width: 1.8rem;
  margin-right: 10px;
}
.list-block .con .list .list-msg {
  flex: 1;
  display: flex;
}
.list-block .con .list .list-msg .list-msg-left {
  flex: 1;
  overflow: hidden;
  max-width: 6rem;
}
.list-block .con .list .list-msg .list-msg-left .score {
  font-weight: 700;
  color: #faaf00;
  font-size: 0.4rem;
}
.list-block .con .list .list-msg .list-msg-left p {
  margin-bottom: 5px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.list-block .con .list .list-msg .list-msg-left p:nth-of-type(1) {
  font-size: 17px;
  color: #333;
  font-weight: 700;
}
.list-block .list .list-msg-left p:nth-of-type(2),
.list-block .list .list-msg-left p:nth-of-type(3), 
.list-block .list .list-msg-left p:nth-of-type(4){
  font-size: 13px;
  color: #666;
}

.list-block .con .list .list-msg .list-msg-right .score {
  font-size: 16px;
  color: #faaf00;
}
.list-block .con .list .list-msg .list-msg-right .fen {
  color: #999999;
}
</style>
